<template>
	<div class="ef-node-form" v-show="type !== 'line'">
		<el-tabs tab-position="top">
			<el-form :model="node" ref="dataForm" label-width="80px" v-show="type === 'node'">
				<el-tab-pane label="基本属性">
					<el-form-item label="类型">
						<el-input v-model="node.type" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="步骤名称">
						<el-input v-model="node.name" maxlength="20" placeholder="步骤名称"></el-input>
					</el-form-item>
					<el-form-item label="排序号">
						<el-input-number v-model="node.sortNo" placeholder="排序号"></el-input-number>
					</el-form-item>
					<el-form-item label="步骤说明">
						<el-input v-model="node.remark" maxlength="20"></el-input>
					</el-form-item>
					<el-form-item label="位置坐标">
						<span>x:{{ node.left }}</span><span style="margin-left: 20px">y:{{ node.top }}</span>
					</el-form-item>
					<el-form-item label="ico图标">
						<el-input v-model="node.ico"></el-input>
					</el-form-item>
					<el-form-item label="状态">
						<el-radio-group v-model="node.state">
							<el-radio-button label="1">启用</el-radio-button>
							<el-radio-button label="0">停用</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="子流程">
						<el-select v-model="childFlowStep.childFlowId" @change="setChildFlowId">
							<el-option v-for="item in flowList" :key="item.value" :value="item.value" :label="item.label"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="结束操作">
						<el-radio-group v-model="childFlowStep.endOpt">
							<el-radio-button label="0">返回父流程</el-radio-button>
							<el-radio-button label="1">结束父流程</el-radio-button>
							<el-radio-button label="2">独立运行</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</el-tab-pane>
				<el-tab-pane label="经办权限">
					<el-form-item label="审批人员">
						<select-user-dialog v-model:accountId="node.userRole" :mode="true"/>
					</el-form-item>
					<el-form-item label="审批部门">
						<select-dept-dialog v-model:deptId="node.deptRole" :mode="true"/>
					</el-form-item>
					<el-form-item label="行政职务">
						<select-user-level-dialog v-model:levelId="node.deptRole" :mode="true"/>
					</el-form-item>
					<el-form-item label="筛选规则">
						<el-select v-model="node.autoUserModel">
							<el-option v-for="item in autoUserModelOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="主办人员" v-if="node.autoUserModel=='1'">
						<select-user-dialog v-model:accountId="node.defaultAuto" :mode="false"/>
					</el-form-item>
					<el-form-item label="指定部门" v-if="node.autoUserModel=='4'||node.autoUserModel=='11'">
						<select-dept-dialog v-model:deptId="node.defaultAuto" :mode="false"/>
					</el-form-item>
					<el-form-item label="表单字段" v-if="node.autoUserModel=='7'">
						<el-select v-model="node.defaultAuto">
							<el-option v-for="item in formFieldList" :key="item.id" :value="item.id" :label="item.label"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="指定步骤" v-if="node.autoUserModel=='6' || node.autoUserModel=='12' || node.autoUserModel=='14'">
						<el-select v-model="node.defaultAuto">
							<el-option v-for="item in bpmStepList" :key="item.value" :value="item.value" :label="item.label"></el-option>
						</el-select>
					</el-form-item>
				</el-tab-pane>
				<el-tab-pane label="数据权限">
						<childFieldMap :child-flow-id="childFlowStep.childFlowId" :form-field-list="formFieldList" :data-mapping="childFlowStep.dataMapping"></childFieldMap>
					<el-form-item label="公共附件">
						<el-radio-group v-model="childFlowStep.copyPublicFile">
							<el-radio-button label="0">禁用</el-radio-button>
							<el-radio-button label="1">拷贝</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</el-tab-pane>
				<el-tab-pane label="事件触发">
					<el-divider>前置插件</el-divider>
					<el-form-item label="接口名称">
						<el-select v-model="node.beforeClass"></el-select>
					</el-form-item>
					<el-form-item label="接口参数">
						<el-input v-model="node.beforeParam" placeholder="接口参数"></el-input>
					</el-form-item>
					<el-divider>后置插件</el-divider>
					<el-form-item label="后置插件">
						<el-select v-model="node.afterClass"></el-select>
					</el-form-item>
					<el-form-item label="插件参数">
						<el-input v-model="node.afterParam" placeholder="接口参数"></el-input>
					</el-form-item>
					<el-divider>消息提醒</el-divider>
					<el-form-item label="抄送方式">
						<el-radio-group v-model="node.autoSendType">
							<el-radio-button label="0">禁止</el-radio-button>
							<el-radio-button label="1">自动</el-radio-button>
							<el-radio-button label="2">手动</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="审批人">
						<el-radio-group v-model="node.remindNextUser">
							<el-radio-button label="1">开启</el-radio-button>
							<el-radio-button label="0">禁用</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="发起人">
						<el-radio-group v-model="node.remindCreateUser">
							<el-radio-button label="1">开启</el-radio-button>
							<el-radio-button label="0">禁用</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="参与人">
						<el-radio-group v-model="node.remindParticipant">
							<el-radio-button label="1">开启</el-radio-button>
							<el-radio-button label="0">禁用</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</el-tab-pane>
			</el-form>
		</el-tabs>
		<el-footer>
			<el-button style="width: 100%" type="primary" icon="el-icon-check" @click="save">保存</el-button>
		</el-footer>
	</div>
</template>

<script>
import {cloneDeep} from 'lodash'
import selectUserDialog from "@/views/module/selectUserDialog";
import selectDeptDialog from "@/views/module/selectDeptDialog";
import selectUserLevelDialog from "@/views/module/selectUserLevelDialog";
import childFieldMap from './childFieldMap'
export default {
	components: {
		selectUserLevelDialog,
		selectUserDialog,
		selectDeptDialog,
		childFieldMap,
	},
	props: {
	},
	data() {
		return {
			isSaveing: false,
			activeName: '1',
			flowList:[],
			formFieldList:[],
			childTableList: [],
			childTableRowRole: {},
			childTableRole: {},
			bpmStepList: [],
			autoUserModelOptions: [
				{value: "1", label: '默认人员'},
				{value: "2", label: '本部门领导'},
				{value: "3", label: '上级部门领导'},
				{value: "4", label: '指定部门领导'},
				{value: "6", label: '指定步骤部门领导'},
				{value: "7", label: '表单字段'},
				{value: "8", label: '公文发起人'},
				{value: "9", label: '公文发起人部门领导'},
				{value: "10", label: '上级分管领导'},
				{value: "11", label: '指定部门分管领导'},
				{value: "12", label: '指定步骤分管领导'},
				{value: "13", label: '公文发起人分管领导'},
				{value: "14", label: '指定步骤主办人'},
			],
			childFlowStep:{
				stepId:'',
				flowId:'',
				childFlowId:'',
				endOpt:'0',
				copyPublicFile:'0',
				dataMapping:[]
			},
			visible: true,
			// node 或 line
			type: 'node',
			node: {},
			line: {},
			data: {},
			flowId: this.$route.query.flowId,
			stateList: '1',
			rules: {
				label: [
					{required: true, message: '条件标题不能为空', trigger: 'blur'}
				],

			}
		}
	},
	created() {
	},
	mounted() {
		this.loadBpmFlowStep();
		this.getBpmFlowListForSelect();
	},
	watch: {
		'node.remark': {
			handler(val) {
				var than_ = this;
				this.data.nodeList.forEach(item => {
					if (than_.node.id == item.id) {
						item.remark = val;
					}
				})
			}
		},
		'node.state': {
			handler(val) {
				var than_ = this;
				this.data.nodeList.forEach(item => {
					if (than_.node.id == item.id) {
						item.state = val;
					}
				})
			}
		},
		'node.name': {
			handler(val) {
				var than_ = this;
				this.data.nodeList.forEach(item => {
					if (than_.node.id == item.id) {
						item.name = val;
					}
				})
			}
		},
	},
	methods: {
		setChildFlowId(val){
			this.childFlowStep.childFlowId = val;
		},
		/**
		 * 表单修改，这里可以根据传入的ID进行业务信息获取
		 * @param data
		 * @param id
		 */
		childNodeInit(data, id,formFields) {
			this.type = 'node'
			this.data = data
			this.formFieldList=formFields,
			data.nodeList.filter((node) => {
				if (node.id === id) {
					this.childTableList=[];
					this.formFieldList.forEach(item => {
						if (item.elType == "children-data-table") {
							this.childTableList.push(item);
						}
					})
					this.node = cloneDeep(node)
				/*	console.log(this.node.childTableRowRole);
					if (this.node.childTableRowRole != null && this.node.childTableRowRole != undefined && this.node.childTableRowRole != '') {
						this.childTableRowRole = JSON.parse(this.node.childTableRowRole);
						console.log(this.formFieldList);
						this.formFieldList.forEach(item => {
							if (this.childTableRowRole[item.id] == undefined || this.childTableRowRole[item.id] == "" || this.childTableRowRole[item.id] == null) {
								//this.childTableRole[item.id] = [];
								this.childTableRowRole[item.id] = {"addRole": false, "delRole": false}
							}
						})
					} else {
						this.formFieldList.forEach(item => {
							if (item.elType == "children-data-table") {
								this.childTableRowRole[item.id] = {"addRole": false, "delRole": false}
							}
						})
					}*/
				}
			})
			this.getBpmChildStep(id);
		},
		lineInit(line) {
			this.type = 'line'
			this.line = line
		},
		// 修改连线
		saveLine() {
			this.$refs.dataFormLine.validate(async (valid) => {
				if (valid) {
					var res = await this.$API.bpm.bpmStepCondition.setBpmStepCondition.post({
						flowId:this.line.flowId,
						fromId: this.line.from,
						toId: this.line.to,
						label: this.line.label,
						stepCondition: this.line.condition,
						conditionItem: JSON.stringify(this.line.conditionItem)
					});
					this.isSaveing = false;
					if (res.code == 200) {
						this.$emit('setLineLabel', this.line.from, this.line.to, this.line.label, this.line.condition, this.line.conditionItem)
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				}
			})

		},
		save() {
			if (this.node.id == undefined) {
				this.$alert("请选择一个具体的修改节点", "提示", {type: 'error'})
				return;
			}
			this.data.nodeList.filter((node) => {
				if (node.id === this.node.id) {
					node.sortNo = this.sortNo
					node.flowId = this.flowId
					node.name = this.node.name
					node.left = this.node.left
					node.top = this.node.top
					node.ico = this.node.ico
					node.state = this.node.state
					node.remark = this.node.remark
					node.changeTitle = this.node.changeTitle
					node.follow = this.node.follow
					node.addStep = this.node.addStep
					node.approvalFlag = this.node.approvalFlag
					node.userRole = this.node.userRole
					node.deptRole = this.node.deptRole
					node.levelRole = this.node.levelRole
					node.approval = this.node.approval
					node.passEndFlag = this.node.passEndFlag
					node.parentWait = this.node.parentWait
					node.waitStepId = this.node.waitStepId
					node.goBack = this.node.goBack
					node.sameJump = this.node.sameJump
					node.concurrentFlag = this.node.concurrentFlag
					node.gatherFlag = this.node.gatherFlag
					node.passTime = this.node.passTime
					node.writerField = this.node.writerField
					node.hideField = this.node.hideField
					node.xUploadRole = this.node.xUploadRole
					node.publicFileRole = this.node.publicFileRole
					node.changeUser = this.node.changeUser
					node.doRule = this.node.doRule
					node.opRule = this.node.opRule
					node.autoUserModel = this.node.autoUserModel
					node.defaultAuto = this.node.defaultAuto
					node.defaultAutoOther = this.node.defaultAutoOther
					node.beforeClass = this.node.beforeClass
					node.beforeParam = this.node.beforeParam
					node.afterClass = this.node.afterClass
					node.afterParam = this.node.afterParam
					node.autoSendType = this.node.autoSendType
					node.remindNextUser = this.node.remindNextUser
					node.remindCreateUser = this.node.remindCreateUser
					node.remindParticipant = this.node.remindParticipant
					this.saveChildBpmStepInfo();
					this.saveBpmStepInfo();
				}
			})
		},
		saveChildBpmStepInfo() {
			var params ={
				stepId:this.node.id,
				flowId:this.node.flowId,
				childFlowId:this.childFlowStep.childFlowId,
				endOpt:this.childFlowStep.endOpt,
				copyPublicFile:this.childFlowStep.copyPublicFile,
				dataMapping:JSON.stringify(this.childFlowStep.dataMapping)
			};
			this.$API.bpm.bpmChildStep.setBpmChildStep.post(params);
		},
		async saveBpmStepInfo() {
			var params = this.node;
			params.childTableRowRole = JSON.stringify(this.childTableRowRole);
			params = JSON.parse(JSON.stringify(params));
			if (params.hideField != undefined) {
				params.hideField = this.node.hideField.join(",");
			}
			if (params.writerField != undefined) {
				params.writerField = this.node.writerField.join(",");
			}
			var res = await this.$API.bpm.bpmStep.update.post(params);
			if (res.code == 200) {
				this.$message.success("操作成功");
				this.$emit('repaintEverything');
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async loadBpmFlowStep() {
			var res = await this.$API.bpm.bpmStep.getBpmFlowStepByFlowIdForSelect.get({flowId: this.flowId});
			if (res.code == 200) {
				this.bpmStepList = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getBpmFlowListForSelect()
		{
			var res = await this.$API.bpm.bpmFlow.getBpmFlowListForSelect.get({model:'1'});
			if (res.code == 200) {
				this.flowList = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getBpmChildStep(id) {
			var res = await this.$API.bpm.bpmChildStep.getBpmChildStep.get({stepId:id,flowId: this.flowId});
			if (res.code == 200) {
				this.childFlowStep ={
					flowId:res.data.flowId,
					stepId:res.data.stepId,
					childFlowId:res.data.childFlowId,
					endOpt:res.data.endOpt,
					copyPublicFile:res.data.copyPublicFile,
					dataMapping:JSON.parse(res.data.dataMapping)
				}
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
	}
}
</script>
<style lang="scss" scoped>
> > > .el-descriptions__body {
	text-align: center;
}

.el-radio-button {
	:deep(.el-radio-button__inner) {
		padding: 5px 6px;
	}
}

.el-node-form-tag {
	position: absolute;
	top: 50%;
	margin-left: -15px;
	height: 40px;
	width: 15px;
	background-color: #fbfbfb;
	border: 1px solid rgb(220, 227, 232);
	border-right: none;
	z-index: 0;
}
</style>
